<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :values="values" :current="segmented_current" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
		</view>
		<view v-show="segmented_current === 0">
			<view class="layout">
				<view class="box" v-for="(item,index) in pets" :key="item.id">
					<view class="pic">
						<image lazy-load :src="item.url" alt="" mode="widthFix" @click="onPreview(index)"/>
					</view>
					<view class="text">
						{{item.height}} * {{item.width}}
					</view>
				</view>
			</view>
			
			<view class="float">
				<uni-icons name="刷新" class="item" type="refresh" size="50"></uni-icons>
				<uni-icons name="顶部" class="item" type="arrow-up" size="50"></uni-icons>
				<!-- 下面这行代码，给iPhone预留出来虚拟home键位置，具体可查看这行css代码 -->
				<view class="box"></view>
			</view>
			
			<view class="loadMore">
				<uni-load-more status="loading"></uni-load-more>
			</view>
		</view>
		<view v-show="segmented_current === 1">
			猫猫内容
		</view>
		<view v-show="segmented_current === 2">
			狗狗内容
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">刷新</view>
			<view class="item" @click="onTop">顶部</view>
			<!-- 下面这行代码，给iPhone预留出来虚拟home键位置，具体可查看这行css代码 -->
			<view class="box"></view>
		</view>
	</view> 
</template>

<script setup>
import { ref,computed  } from "vue";
import { onReachBottom , onPullDownRefresh } from "@dcloudio/uni-app";


const segmented_current = ref(0);
const pets = ref([]);

// 发送网络请求
function testNetWork(){
	uni.showNavigationBarLoading();
	uni.request({
		url:"https://api.thecatapi.com/v1/images/search",
		data:{
			limit:10
		}
	}).then(res=>{
		pets.value = [...pets.value,...res.data]
		// 上面是展开符写法，主要为了触底刷新之后，不覆盖原有元素，以下是覆盖元素写法。
		// pets.value = res.data
	}).catch(err=>{
		uni.showToast({
			title:"请求有误，请重新刷新",
			icon:"none",
			duration:2000
		})
	}).finally(()=>{
		// 关掉标题栏刷新时候的loading图标
		uni.hideNavigationBarLoading();
		// 关掉下拉刷新时候的loading图标
		uni.stopPullDownRefresh();
		console.log("testNetWork finally function console log")
	})
}

// 点击事件
const onPreview = function onPreview(index){
	let urls = pets.value.map(item=>item.url)
	uni.previewImage({
		urls:urls,
		current:index
	})
}

const onRefresh = function(){
	uni.startPullDownRefresh();
}

const onTop = () => {
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}

// 初始化
testNetWork();

const classify = [{key:"all",value:"全部"},{key:"cat",value:"猫猫"},{key:"dog",value:"狗狗"}]
const values = computed(()=>classify.map(item=>item.value))

// 触底加载更多
onReachBottom(()=>{
	testNetWork();
})

// 下拉刷新
onPullDownRefresh(()=>{
	// 下拉西先将数组清空
	pets.value = [],
	
	testNetWork();
})


const onClickItem = function(e){
	console.log('onClickItem log :',e)
	if (segmented_current.value != e.currentIndex) {
		segmented_current.value = e.currentIndex;
		pets.value = [];
		// testNetWork();
		console.log(classify[segmented_current.value].key)
	}
}

</script>

<style lang="scss" scoped>
.container{
	.menu{
		padding: 50rpx 50rpx 0;
	}
	.layout{
		padding: 25rpx;
		padding-right: 25rpx;
		.box{
			margin-bottom: 60px;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.8);
			border-radius: 15rpx;
			overflow: hidden;
			.pic{
				image{
					width: 100%;
				}
			}
			.text{
				padding: 30rpx;
			}
		}
	}
	.loadMore{
		// 以下写这个计算的时候，必须加上空格
		padding-bottom:calc(env(safe-area-inset-bottom) + 50rpx);
	}
	.float{
		position: fixed;
		right: 30rpx;
		bottom: 80rpx;
		padding-bottom: env(safe-area-inset-bottom);
		.item{
			width: 90rpx;
			height: 90rpx;
			background: rgba(255,255,255,0.9);
			border-radius: 50%;
			margin-bottom: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.8);
		}
		.box{
			border: 1px solid red;
			// 下面这行代码，给iPhone预留出来虚拟home键位置
			height: env(safe-area-inset-bottom);
		}
	}
}
</style>
